<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI问答 - 智联医防服务平台</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        :root {
            --primary: #165DFF;
            --secondary: #36D399;
            --accent: #FF9F43;
            --dark: #1E293B;
            --light: #F8FAFC;
        }

        body {
            font-family: 'Inter', system-ui, sans-serif;
            background-color: var(--light);
            color: var(--dark);
            padding-top: 80px;
        }

        .bg-gradient-blue {
            background: linear-gradient(135deg, var(--primary) 0%, #0F4C81 100%);
        }

        .nav-link {
            position: relative;
            color: var(--dark) !important;
            font-weight: 500;
        }

        .nav-link:hover,
        .nav-link.active {
            color: var(--primary) !important;
        }

        .nav-link::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: 0;
            left: 0;
            background-color: var(--primary);
            transition: width 0.3s ease;
        }

        .nav-link:hover::after,
        .nav-link.active::after {
            width: 100%;
        }

        .card-hover {
            transition: all 0.3s ease;
        }

        .card-hover:hover {
            transform: translateY(-8px);
            box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
        }

        .section-title {
            font-size: clamp(1.5rem, 3vw, 2.5rem);
            font-weight: 700;
            margin-bottom: 2.5rem;
        }

        .footer {
            background-color: var(--dark);
            color: white;
            padding-top: 4rem;
            padding-bottom: 2rem;
        }

        .footer-links a {
            color: rgba(255, 255, 255, 0.7);
            text-decoration: none;
            transition: color 0.3s;
        }

        .footer-links a:hover {
            color: white;
        }

        .profile-dropdown {
            display: none;
            position: absolute;
            right: 0;
            top: 100%;
            width: 240px;
            background: white;
            border-radius: 12px;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
            z-index: 1000;
            padding: 0.5rem 0;
        }

        .show-dropdown:hover .profile-dropdown {
            display: block;
        }

        .nav-shadow {
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        }

        .navbar {
            background-color: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
        }

        .record-item {
            border-left: 3px solid var(--primary);
            padding-left: 15px;
            margin-bottom: 25px;
        }

        .health-metric {
            height: 100%;
        }

        .record-detail {
            background-color: #f8f9fa;
            border-radius: 10px;
            padding: 20px;
            margin-bottom: 20px;
        }

        .metric-card {
            border-radius: 12px;
            overflow: hidden;
            height: 100%;
        }

        /*  */

        /* 自定义样式 */
        .bg-gradient-blue {
            background: linear-gradient(135deg, #1e88e5, #0d47a1);
        }

        .user-message {
            border-bottom-right-radius: 0 !important;
        }

        .ai-message {
            border-bottom-left-radius: 0 !important;
        }

        #chat-container {
            min-height: 200px;
        }

        /* 滚动条样式 */
        .overflow-auto::-webkit-scrollbar {
            width: 6px;
        }

        .overflow-auto::-webkit-scrollbar-track {
            background: #f1f1f1;
            border-radius: 10px;
        }

        .overflow-auto::-webkit-scrollbar-thumb {
            background: #888;
            border-radius: 10px;
        }

        .overflow-auto::-webkit-scrollbar-thumb:hover {
            background: #555;
        }

        /*  */
    </style>
</head>

<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-light fixed-top py-3 nav-shadow">
        <div class="container">
            <a class="navbar-brand d-flex align-items-center" href="index.html">
                <div class="bg-gradient-blue rounded-lg d-flex align-items-center justify-content-center me-2"
                    style="width: 40px; height: 40px;">
                    <i class="fas fa-heartbeat text-white fs-5"></i>
                </div>
                <span class="fs-4 fw-bold text-primary">智联医防</span>
            </a>

            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav mx-auto">
                    <li class="nav-item mx-2">
                        <a class="nav-link" href="index.html">首页</a>
                    </li>
                    <li class="nav-item mx-2">
                        <a class="nav-link active" href="ai-consultation.html">AI问诊</a>
                    </li>
                    <li class="nav-item mx-2">
                        <a class="nav-link" href="medical-science.html">医学科普</a>
                    </li>
                    <li class="nav-item mx-2">
                        <a class="nav-link" href="mental-health.html">心理健康</a>
                    </li>
                    <li class="nav-item mx-2">
                        <a class="nav-link" href="e-record.html">电子档案</a>
                    </li>
                </ul>

                <div class="d-flex align-items-center position-relative show-dropdown">
                    <a href="profile.html" class="d-flex align-items-center text-decoration-none">
                        <img src="https://picsum.photos/id/64/100/100" alt="用户头像" class="rounded-circle me-2"
                            style="width: 40px; height: 40px; border: 2px solid var(--primary);">
                        <span class="d-none d-md-inline fw-medium me-1">张明阳</span>
                        <i class="fas fa-angle-down text-muted"></i>
                    </a>

                    <div class="profile-dropdown">
                        <a href="profile.html" class="dropdown-item py-2">
                            <i class="far fa-user me-2"></i>个人资料
                        </a>
                        <a href="#" class="dropdown-item py-2">
                            <i class="fas fa-cog me-2"></i>设置
                        </a>
                        <hr class="dropdown-divider">
                        <a href="#" class="dropdown-item py-2 text-danger">
                            <i class="fas fa-sign-out-alt me-2"></i>退出登录
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </nav>

    <!-- AI问诊 -->
    <section id="ai-consultation" class="py-5 bg-light">
        <div class="container py-5">
            <div class="text-center mb-5">
                <h2 class="section-title text-dark">
                    AI智能<span class="text-primary">问诊服务</span>
                </h2>
                <p class="text-muted fs-5 mx-auto" style="max-width: 700px;">
                    我们的AI智能问诊系统基于先进的医学知识库和自然语言处理技术，能够快速理解您的症状并提供初步诊断建议。
                </p>
            </div>

            <div class="row g-5">

                <!--  -->
                <div class="col-lg-6">
                    <div class="card feature-card h-100">
                        <!-- 标题区域 -->
                        <div class="bg-gradient-blue text-white p-4 rounded-top">
                            <h3 class="h5 fw-semibold mb-1">AI问诊助手</h3>
                            <p class="text-white-50 mb-0">描述您的症状，获取初步诊断建议</p>
                        </div>

                        <div class="card-body p-4 d-flex flex-column" style="min-height: 600px;">
                            <!-- 对话区域 -->
                            <div class="flex-grow-1 mb-4 overflow-auto" style="max-height: 300px;">
                                <div id="chat-container" class="d-flex flex-column gap-3">
                                    <!-- 示例对话 -->
                                    <div class="user-message bg-light rounded-3 p-3 align-self-end"
                                        style="max-width: 80%;">
                                        <div class="d-flex align-items-center mb-2">
                                            <span class="fw-semibold text-primary">您</span>
                                            <small class="text-muted ms-2">刚刚</small>
                                        </div>
                                        <p class="mb-0">我头痛了3天，伴有轻微发热</p>
                                    </div>

                                    <div class="ai-message bg-primary bg-opacity-10 rounded-3 p-3 align-self-start"
                                        style="max-width: 80%;">
                                        <div class="d-flex align-items-center mb-2">
                                            <span class="fw-semibold text-primary">AI医生</span>
                                            <small class="text-muted ms-2">刚刚</small>
                                        </div>
                                        <p class="mb-0">您好！根据您的描述，建议您测量体温并观察症状变化。如果体温超过38.5°C或症状加重，请及时就医。</p>
                                    </div>
                                </div>
                            </div>

                            <!-- 输入区域 -->
                            <div class="mt-auto">
                                <div class="mb-3">
                                    <label class="form-label">请描述您的症状</label>
                                    <textarea id="symptom-input" class="form-control" rows="3"
                                        placeholder="例如：我头痛了3天，伴有轻微发热..."></textarea>
                                </div>

                                <div class="mb-3">
                                    <label class="form-label">选择症状持续时间</label>
                                    <div class="btn-group w-100" role="group">
                                        <input type="radio" class="btn-check" name="duration" id="duration1"
                                            autocomplete="off" value="不到1天">
                                        <label class="btn btn-outline-primary" for="duration1">不到1天</label>

                                        <input type="radio" class="btn-check" name="duration" id="duration2"
                                            autocomplete="off" value="1-3天">
                                        <label class="btn btn-outline-primary" for="duration2">1-3天</label>

                                        <input type="radio" class="btn-check" name="duration" id="duration3"
                                            autocomplete="off" value="4-7天">
                                        <label class="btn btn-outline-primary" for="duration3">4-7天</label>

                                        <input type="radio" class="btn-check" name="duration" id="duration4"
                                            autocomplete="off" value="1周以上">
                                        <label class="btn btn-outline-primary" for="duration4">1周以上</label>
                                    </div>
                                </div>

                                <div class="mb-4">
                                    <label class="form-label">是否有以下情况？（可多选）</label>
                                    <div class="d-flex flex-wrap gap-2">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" id="fever" value="发热">
                                            <label class="form-check-label" for="fever">发热</label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" id="cough" value="咳嗽">
                                            <label class="form-check-label" for="cough">咳嗽</label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" id="fatigue" value="乏力">
                                            <label class="form-check-label" for="fatigue">乏力</label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" id="nausea" value="恶心/呕吐">
                                            <label class="form-check-label" for="nausea">恶心/呕吐</label>
                                        </div>
                                    </div>
                                </div>

                                <button id="submit-btn" class="btn btn-primary w-100 py-3 rounded-pill">
                                    <i class="fas fa-search me-2"></i>获取诊断建议
                                </button>
                            </div>
                        </div>
                    </div>
                </div>




                <!--  -->
                <div class="col-lg-6">
                    <div class="mb-5">
                        <h3 class="h3 fw-semibold mb-3">AI问诊的优势</h3>
                        <p class="text-muted">
                            我们的AI问诊系统由医学专家和技术团队共同开发，融合了最新的医学知识和人工智能技术，为您提供专业、便捷的健康咨询服务。
                        </p>
                    </div>

                    <div class="mb-4">
                        <div class="d-flex mb-4">
                            <div class="bg-primary bg-opacity-10 rounded-circle flex-shrink-0 d-flex align-items-center justify-content-center me-4"
                                style="width: 40px; height: 40px;">
                                <i class="far fa-clock text-primary"></i>
                            </div>
                            <div>
                                <h4 class="h5 fw-medium">24/7全天候服务</h4>
                                <p class="text-muted mb-0">无论何时何地，只要您需要健康咨询，我们的AI助手随时为您服务。</p>
                            </div>
                        </div>

                        <div class="d-flex mb-4">
                            <div class="bg-primary bg-opacity-10 rounded-circle flex-shrink-0 d-flex align-items-center justify-content-center me-4"
                                style="width: 40px; height: 40px;">
                                <i class="fas fa-bolt text-primary"></i>
                            </div>
                            <div>
                                <h4 class="h5 fw-medium">快速响应</h4>
                                <p class="text-muted mb-0">无需等待，AI助手立即分析您的症状并提供初步诊断建议。</p>
                            </div>
                        </div>

                        <div class="d-flex mb-4">
                            <div class="bg-primary bg-opacity-10 rounded-circle flex-shrink-0 d-flex align-items-center justify-content-center me-4"
                                style="width: 40px; height: 40px;">
                                <i class="fas fa-lock text-primary"></i>
                            </div>
                            <div>
                                <h4 class="h5 fw-medium">隐私保护</h4>
                                <p class="text-muted mb-0">我们严格保护您的健康信息，所有咨询内容仅用于提供医疗建议。</p>
                            </div>
                        </div>
                    </div>

                    <div class="alert alert-primary d-flex">
                        <i class="fas fa-info-circle me-3 mt-1 fs-4 text-primary"></i>
                        <div>
                            <h4 class="alert-heading">温馨提示</h4>
                            <p class="mb-0">AI问诊结果仅供参考，不能替代专业医生的诊断。如有严重症状，请立即就医。</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 页脚 -->
    <footer class="footer">
        <div class="container">
            <div class="row g-5 mb-5">
                <div class="col-lg-4">
                    <div class="d-flex align-items-center mb-4">
                        <div class="bg-gradient-blue rounded-lg d-flex align-items-center justify-content-center me-2"
                            style="width: 40px; height: 40px;">
                            <i class="fas fa-heartbeat text-white"></i>
                        </div>
                        <span class="fs-4 fw-bold text-white">智联医防</span>
                    </div>
                    <p class="text-white-50 mb-4">
                        我们致力于提供便捷、专业的医疗健康服务，让每个人都能享受到高质量的医疗资源。
                    </p>
                    <div class="d-flex">
                        <a href="#" class="btn btn-light btn-sm rounded-circle me-2" style="width: 40px; height: 40px;">
                            <i class="fab fa-weixin"></i>
                        </a>
                        <a href="#" class="btn btn-light btn-sm rounded-circle me-2" style="width: 40px; height: 40px;">
                            <i class="fab fa-weibo"></i>
                        </a>
                        <a href="#" class="btn btn-light btn-sm rounded-circle me-2" style="width: 40px; height: 40px;">
                            <i class="fab fa-qq"></i>
                        </a>
                        <a href="#" class="btn btn-light btn-sm rounded-circle" style="width: 40px; height: 40px;">
                            <i class="fab fa-youtube"></i>
                        </a>
                    </div>
                </div>

                <div class="col-lg-2">
                    <h5 class="text-white mb-4">快速链接</h5>
                    <ul class="list-unstyled footer-links">
                        <li class="mb-2"><a href="index.html">首页</a></li>
                        <li class="mb-2"><a href="ai-consultation.html">AI问诊</a></li>
                        <li class="mb-2"><a href="medical-science.html">医学科普</a></li>
                        <li class="mb-2"><a href="mental-health.html">心理健康</a></li>
                        <li class="mb-2"><a href="e-record.html">电子档案</a></li>
                    </ul>
                </div>

                <div class="col-lg-3">
                    <h5 class="text-white mb-4"><a href="https://zwfw.nhc.gov.cn/cxx/"
                            class="text-white"></a>基层医疗信息查询</a></h5>
                    <ul class="list-unstyled footer-links">
                        <li class="d-flex mb-3">
                            <i class="fas fa-map-marker-alt text-primary mt-1 me-3"></i>
                            <span><a href="https://www.nhc.gov.cn/wjw/wsbzxx/wsbz.shtml"
                                    class="text-white">卫生标准查询</a></span>
                        </li>
                        <li class="d-flex mb-3">
                            <i class="fas fa-map-marker-alt text-primary me-3"></i>
                            <span><a href="https://sppt.cfsa.net.cn:8086/db" class="text-white">食品安全国家标准查询</a></span>
                        </li>
                        <li class="d-flex mb-3">
                            <i class="fas fa-map-marker-alt text-primary me-3"></i>
                            <span><a href="https://www.nhc.gov.cn/wjw/jbywml/list.shtml"
                                    class="text-white">基本药物目录查询</a></span>
                        </li>
                        <!-- <li class="d-flex mb-3">
                            <i class="fas fa-map-marker-alt text-primary me-3"></i>
                            <span><a href="https://zwfw.nhc.gov.cn/cxx/ywcx/ygptcx/"
                                    class="text-white">药物平台管理查询</a></span>
                        </li> -->
                        <li class="d-flex mb-3">
                            <i class="fas fa-map-marker-alt text-primary me-3"></i>
                            <span><a href="https://zwfw.nhc.gov.cn/cxx/qtcx/gjwsczcx/"
                                    class="text-white">国家卫生城镇查询</a></span>
                        </li>
                        <li class="d-flex">
                            <i class="fas fa-map-marker-alt text-primary me-3"></i>
                            <span><a href="https://zwfw.nhc.gov.cn/cxx/ywjgcx/qgyzjg/"
                                    class="text-white">医卫机构查询</a></span>
                        </li>

                    </ul>
                </div>

                <div class="col-lg-3">
                    <h5 class="text-white mb-4">医疗信息查询</h5>
                    <p class="text-white-50 mb-4">
                        查询权威医疗数据，获取最新公共卫生服务信息
                    </p>
                    <form>
                        <div class="mb-3">
                            <input type="email" class="form-control bg-dark border-dark text-white"
                                placeholder="您的邮箱地址">
                        </div>
                        <button type="submit" class="btn btn-primary w-100 py-3 rounded-pill shadow-lg">
                            <i class="fas fa-search me-2"></i>立即查询
                        </button>
                    </form>
                </div>
            </div>

            <div class="border-top border-gray-800 pt-4">
                <div class="d-flex flex-column flex-md-row justify-content-between align-items-center">
                    <p class="text-white-50 mb-3 mb-md-0">
                        &copy; 2025 智联医防服务平台. 保留所有权利.
                    </p>
                    <div class="d-flex">
                        <a href="#" class="text-white-50 me-3">隐私政策</a>
                        <a href="#" class="text-white-50 me-3">服务条款</a>
                        <a href="#" class="text-white-50 me-3">免责声明</a>
                        <a href="#" class="text-white-50">帮助中心</a>
                    </div>
                </div>
            </div>
        </div>
    </footer>

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
        // 导航栏滚动效果
        window.addEventListener('scroll', function () {
            const navbar = document.querySelector('.navbar');
            if (window.scrollY > 100) {
                navbar.classList.add('shadow');
            } else {
                navbar.classList.remove('shadow');
            }
        });

        //
        document.addEventListener('DOMContentLoaded', function () {
            const chatContainer = document.getElementById('chat-container');
            const symptomInput = document.getElementById('symptom-input');
            const submitBtn = document.getElementById('submit-btn');

            // 预设的固定回答库
            const presetResponses = {
                "头痛": "头痛可能是由多种原因引起的，建议：\n1. 测量体温\n2. 保持充足休息\n3. 适量饮水\n\n如果持续超过3天或加重，请即时就医'",
                "头疼": "头疼可能是由多种原因引起的，建议：\n1. 测量体温\n2. 保持充足休息\n3. 适量饮水\n\n如果持续超过3天或加重，请即时就医'",
                "发热": "发热护理建议：\n1. 多补充水分\n2. 物理降温（温水擦浴）\n3. 监测体温变化\n\n体温超过38.5℃或持续3天以上，请即时就医'",
                "咳嗽": "咳嗽护理建议：\n1. 避免刺激性食物\n2. 保持空气湿润\n3. 适量饮用温开水\n\n如伴有胸痛或痰中带血，请立即就医'",
                "腹泻": "腹泻护理建议：\n1. 补充电解质（口服补液盐）\n2. 饮食清淡（如粥、面条）\n3. 避免乳制品\n\n持续超过2天请即时就医'",
                "default": "收到您的症状描述。如需专业医生诊断，请回复'转人工'"
            };

            // 获取预设回答
            function getPresetResponse(message) {
                const lowerMsg = message.toLowerCase();
                if (lowerMsg.includes("头痛")) return presetResponses["头痛"];
                if (lowerMsg.includes("头疼")) return presetResponses["头疼"];
                if (lowerMsg.includes("发热")) return presetResponses["发热"];
                if (lowerMsg.includes("咳嗽")) return presetResponses["咳嗽"];
                if (lowerMsg.includes("腹泻")) return presetResponses["腹泻"];
                return presetResponses["default"];
            }

            // 调用真实AI接口
            async function getAIResponse(userMessage) {
                try {
                    const response = await axios.get('http://hmajax.itheima.net/api/robot', {
                        params: {
                            spoken: userMessage
                        }
                    });
                    return response.data.data.info.text || "已为您转接专业医生，请描述您的详细症状";
                } catch (error) {
                    console.error('API调用失败:', error);
                    return "当前医生繁忙，请稍后再试或直接前往医院就诊";
                }
            }

            // 添加消息到聊天界面
            function addMessage(isAI, message) {
                if (typeof message === 'undefined') message = "未获取到有效回复";

                const messageDiv = document.createElement('div');
                messageDiv.className = isAI ?
                    'ai-message bg-primary bg-opacity-10 rounded-3 p-3 align-self-start' :
                    'user-message bg-light rounded-3 p-3 align-self-end';
                messageDiv.style.maxWidth = '80%';

                const timeString = new Date().toLocaleTimeString('zh-CN', {
                    hour: '2-digit',
                    minute: '2-digit',
                    hour12: false
                });

                messageDiv.innerHTML = `
            <div class="d-flex align-items-center mb-2">
                <span class="fw-semibold text-primary">${isAI ? 'AI医生' : '您'}</span>
                <small class="text-muted ms-2">${timeString}</small>
            </div>
            <p class="mb-0">${message.replace(/\n/g, '<br>')}</p>
        `;

                chatContainer.appendChild(messageDiv);
                chatContainer.scrollTop = chatContainer.scrollHeight;
            }

            // 提交症状描述
            async function handleSubmit() {
                const symptomText = symptomInput.value.trim();
                if (!symptomText) {
                    alert('请输入症状描述');
                    return;
                }

                addMessage(false, symptomText);
                submitBtn.disabled = true;
                submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>思考中...';

                try {
                    let response;
                    if (symptomText.includes("转人工")) {
                        response = await getAIResponse(symptomText);
                    } else {
                        // 添加延迟使交互更自然
                        await new Promise(resolve => setTimeout(resolve, 800));
                        response = getPresetResponse(symptomText);
                    }
                    addMessage(true, response);
                } finally {
                    submitBtn.disabled = false;
                    submitBtn.innerHTML = '<i class="fas fa-search me-2"></i>获取建议';
                    symptomInput.value = '';
                }
            }

            // 事件监听
            submitBtn.addEventListener('click', handleSubmit);

            symptomInput.addEventListener('keydown', function (e) {
                if (e.key === 'Enter' && !e.shiftKey) {
                    e.preventDefault();
                    handleSubmit();
                }
            });
        });
    </script>

</body>

</html>